<template>
      <a-modal :title="title" :width="700" class="custom-modal" @cancel="visible=false" :visible="visible" :footer="null">
        <div style="padding: 30px;">
         <a-form layout="vertical" :form="events_form">
            <a-form-item label="上传发票（发票文件格式为PDF或图片，文件大小10M，支持多张）">
              <a-button @click="$refs.invoiceUrl.click()" icon="upload">上传发票</a-button>
              <input type="file" accept="application/pdf" ref="invoiceUrl" @change="function(e){return invoiceChange(e,1)}" style="display: none;">
            </a-form-item>
            <div v-for="(item,index) in fileUrl" :key="index" class="invoice-upload">
                <img :src="item.urls">
                <label>{{item.name}}</label>
                <p class="voucker-pmp" style="bottom:40px;">
                    <a-icon type="download" style="flex: 1;text-align: left;" @click="fileDownload(item.fileUrl)"/>
                    <a-popconfirm title="删除不能恢复，确定删除？" cancelText="取消" okText="确定" @confirm="delImg(index)">
                        <a-icon slot="icon" type="question-circle-o" style="color: red" />
                        <a-icon type="delete"/>
                    </a-popconfirm>
                </p>
            </div>
             <a-form-item label="快递单图片">
                <a-button @click="$refs.invoiceUrls.click()" icon="upload">上传快递单图片</a-button>
                <input type="file" ref="invoiceUrls" accept="image/*" @change="function(e){return invoiceChange(e,2)}" style="display: none;">
            </a-form-item>
            <img v-if="expressNoUrl" :src="expressNoUrl" style="width: 60px;height:60px;margin-bottom: 24px;">
             <a-form-item label="快递公司">
                <a-input  v-decorator="['expressName', {initialValue: ''}]"/>
            </a-form-item>
             <a-form-item label="快递单号">
                <a-input  v-decorator="['expressNo', {initialValue: ''}]"/>
            </a-form-item>
          </a-form>
         </div>
        <div class="ant-modal-footer">
          <a-button @click="visible=false" type="primary">取消</a-button>
          <a-button @click="handleCmbSubmit" type="primary">确认</a-button>
        </div>
      </a-modal>
</template>
<script>

import { 
  billingUpload
} from '@/api/manage/billing'
import { 
    previewFile
} from '@/utils/util'
import { sysBaseUpload } from '@/api/manage/base'
import pdfImg from '@/assets/file_pdf.png'
export default {
  name: 'invoiceAdd',
  data () {
    return {
        title:'上传发票',
        visible:false,
        fileUrl:[],
        expressNo:'',
        expressName:'',
        expressNoUrl:'',
        id:''
    }
  },
  beforeCreate() {
    this.events_form = this.$form.createForm(this, { name: 'events_form' });
  },
  methods:{
    add(item){
      this.id = item.id;
      this.visible = true;
    },
    async invoiceChange(e,type){
      e.preventDefault();
      let _this = this;
      let file = e.target.files[0];
      if(file===undefined){return;}

      const fileType = ['pdf','png','jpg','gif','jpeg'];
      let fileName = file.name;
      let fileIndex= file.name.lastIndexOf(".");
      let _fileType = file.name.substr(fileIndex+1);
      if (!fileType.includes(_fileType)) {
        _this.$message.error("文件格式错误");
        e.target.value= "";
        return;
      }
      if (!(file.size / 1024 / 1024 < 10)) {
          _this.$message.error('文件大小不能超过 10MB!');
          e.target.value= "";
          return;
      }
      var params = new FormData();
      params.append("file", file);
      let {code,data} = await sysBaseUpload(params);
      if (code === '1') {
        if(type ===1){
          let params = {};
          if(_fileType.indexOf('pdf') > -1){
            params.urls = pdfImg;
          }else{
            params.urls = data;
          }
          params.fileUrl = data;
          params.name = fileName;
          this.fileUrl.push(params);
        }else{
          this.expressNoUrl = data
        }
        e.target.value= "";
      }
    },
     fileDownload(_url){
          previewFile(_url);
      },
      delImg(index){
          this.fileUrl.splice(index,1);
      },
    handleCmbSubmit(){
        this.events_form.validateFieldsAndScroll(async(err, values) => {
        if (!err) {
            if(this.fileUrl.length === 0){
                this.$message.error('至少上传一个发票文件');return;
            }
             let str = {data:this.fileUrl};
            values.param = JSON.stringify(str);   
            values.expressNoUrl = this.expressNoUrl;
            values.id = this.id;
            const {code} = await billingUpload(values);
            if(code === '1'){
              this.$message.success('操作成功');
              this.visible = false
              this.$emit('ok')
            }
        }
      })
    }
  }
}
</script>
<style>
  .invoice-upload{
    width: 120px;
    margin-bottom: 24px;
    display: inline-block;
    margin-right: 10px;
    position: relative;
  }
  .invoice-upload img{
    width: 120px;
    display: block;
  }
  .invoice-upload label{
     overflow: hidden;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    height: 40px;
  }
</style>